import React, { Component } from 'react'

import { Carousel, Flex, Modal, Toast } from 'antd-mobile'

import NavHeader from '../../components/NavHeader'
import HouseItem from '../../components/HouseItem'
import HousePackage from '../../components/HousePackage'

import { REQURST_URL as BASE_URL } from '../../utils/url'
import { getHouseDeatil } from '../../api/house'
import { isFavorites, addFavorites, removeFavorites } from '../../api/user'
import CarouselImg, { Modal as ImgModal, ModalGateway } from 'react-images'
import FooterCount from './FooterCount'
import styles from './index.module.css'
const alert = Modal.alert
// 猜你喜欢
const recommendHouses = [
  {
    id: 1,
    src: BASE_URL + '/img/message/1.png',
    desc: '72.32㎡/南 北/低楼层',
    title: '安贞西里 3室1厅',
    price: 4500,
    tags: ['随时看房'],
  },
  {
    id: 2,
    src: BASE_URL + '/img/message/2.png',
    desc: '83㎡/南/高楼层',
    title: '天居园 2室1厅',
    price: 7200,
    tags: ['近地铁'],
  },
  {
    id: 3,
    src: BASE_URL + '/img/message/3.png',
    desc: '52㎡/西南/低楼层',
    title: '角门甲4号院 1室1厅',
    price: 4300,
    tags: ['集中供暖'],
  },
]

// 百度地图
const BMap = window.BMap

const labelStyle = {
  position: 'absolute',
  zIndex: -7982820,
  backgroundColor: 'rgb(238, 93, 91)',
  color: 'rgb(255, 255, 255)',
  height: 25,
  padding: '5px 10px',
  lineHeight: '14px',
  borderRadius: 3,
  boxShadow: 'rgb(204, 204, 204) 2px 2px 2px',
  whiteSpace: 'nowrap',
  fontSize: 12,
  userSelect: 'none',
}

export default class HouseDetail extends Component {
  state = {
    isLoading: false,

    houseInfo: {
      // 房屋图片
      houseImg: [],
      // 标题
      title: '',
      // 标签
      tags: [],
      // 租金
      price: 0,
      // 房型
      roomType: '两室一厅',
      // 房屋面积
      size: 89,
      // 装修类型
      renovation: '精装',
      // 朝向
      oriented: [],
      // 楼层
      floor: '',
      // 小区名称
      community: '',
      // 地理位置
      coord: {},
      // 房屋配套
      supporting: [],
      // 房屋标识
      houseCode: '',
      // 房屋描述
      description: '',
    },
    id: '',
    isFavorites: false,
    modalIsOpen: false,
    currentIndex: 0,
  }
  token = localStorage.getItem('HKZF_TOKEN')
  componentDidMount() {
    window.scrollTo(0, 0)
    this.setState(
      {
        id: this.props.match.params.id,
        isLoading: true,
      },
      () => {
        this.loadGetHouseDeatil()
        this.isFavoriteHouse()
      }
    )
  }
  // 判断用户是否收藏
  isFavoriteHouse = async () => {
    if (!this.token) return
    const { data: res } = await isFavorites(this.state.id)
    this.setState({
      isFavorites: res.body.isFavorite,
    })
  }
  //点击收藏
  clcikFavorite = async () => {
    if (!this.token) {
      alert('好客租房', '您还未登录，是否跳转登录页面？', [
        { text: '取消' },
        { text: '跳转', onPress: () => this.props.history.push('/login') },
      ])
      return
    }

    if (this.state.isFavorites) {
      await removeFavorites(this.state.id)
      Toast.info('取消收藏', 1, null, false)
    } else {
      await addFavorites(this.state.id)
      Toast.info('添加收藏', 1, null, false)
    }

    this.setState({
      isFavorites: !this.state.isFavorites,
    })
  }
  // 加载房屋详情
  async loadGetHouseDeatil() {
    const { data: res } = await getHouseDeatil(this.state.id)
    this.setState({
      houseInfo: res.body,
      isLoading: false,
    })
    const {
      houseInfo: { community, coord },
    } = this.state
    this.renderMap(community, coord)
  }

  // 渲染轮播图结构
  renderSwipers() {
    const {
      houseInfo: { houseImg },
    } = this.state

    return houseImg.map((item, i) => (
      <a
        key={item}
        href="http://itcast.cn"
        onClick={(e) => {
          e.preventDefault()
          this.setState({
            modalIsOpen: true,
            currentIndex: i,
          })
        }}
        style={{
          display: 'inline-block',
          width: '100%',
          height: 252,
        }}
      >
        <img
          src={BASE_URL + item}
          alt=""
          style={{ width: '100%', height: '252px', verticalAlign: 'top' }}
        />
      </a>
    ))
  }

  // 渲染地图
  renderMap(community, coord) {
    const { latitude, longitude } = coord

    const map = new BMap.Map('map')
    const point = new BMap.Point(longitude, latitude)
    map.centerAndZoom(point, 17)

    const label = new BMap.Label('', {
      position: point,
      offset: new BMap.Size(0, -36),
    })

    label.setStyle(labelStyle)
    label.setContent(`
      <span>${community}</span>
      <div class="${styles.mapArrow}"></div>
    `)
    map.addOverlay(label)
  }

  // 渲染tags
  renderTages(tags) {
    return tags.map((item, i) => {
      const tagsClassName = 'tag' + (i + 1)
      return (
        <span key={i} className={[styles.tag, styles[tagsClassName]].join(' ')}>
          {item}
        </span>
      )
    })
  }

  renderHousePackage = (supporting) => {
    if (supporting.length) return <HousePackage list={supporting} />
    return <div className="title-empty">暂无数据</div>
  }

  render() {
    const {
      isLoading,
      isFavorites,
      modalIsOpen,
      currentIndex,
      houseInfo: {
        community,
        title,
        tags,
        price,
        roomType,
        size,
        renovation,
        floor,
        oriented,
        supporting,
        houseImg,
      },
    } = this.state

    const images = houseImg.map((item) => {
      return {
        source: BASE_URL + item,
      }
    })
    return (
      <div className={styles.root}>
        {/* 导航栏 */}
        <NavHeader
          className={styles.navHeader}
          rightContent={[<i key="share" className="iconfont icon-share" />]}
        >
          {community}
        </NavHeader>

        {/* 图片预览 modalIsOpen需要在state中定义默认为false */}
        <ModalGateway>
          {modalIsOpen ? (
            <ImgModal
              onClose={() => {
                this.setState({
                  modalIsOpen: false,
                })
              }}
            >
              <CarouselImg
                components={{ FooterCount }}
                currentIndex={currentIndex}
                views={images}
              />
            </ImgModal>
          ) : null}
        </ModalGateway>

        {/* 轮播图 */}
        <div className={styles.slides}>
          {!isLoading ? (
            <Carousel autoplay infinite autoplayInterval={5000}>
              {this.renderSwipers()}
            </Carousel>
          ) : (
            ''
          )}
        </div>

        {/* 房屋基础信息 */}
        <div className={styles.info}>
          <h3 className={styles.infoTitle}>{title}</h3>
          <Flex className={styles.tags}>
            <Flex.Item>{this.renderTages(tags)}</Flex.Item>
          </Flex>
          <Flex className={styles.infoPrice}>
            <Flex.Item className={styles.infoPriceItem}>
              <div>
                {price}
                <span className={styles.month}>/月</span>
              </div>
              <div>租金</div>
            </Flex.Item>
            <Flex.Item className={styles.infoPriceItem}>
              <div>{roomType}</div>
              <div>房型</div>
            </Flex.Item>
            <Flex.Item className={styles.infoPriceItem}>
              <div>{size}平米</div>
              <div>面积</div>
            </Flex.Item>
          </Flex>

          <Flex className={styles.infoBasic} align="start">
            <Flex.Item>
              <div>
                <span className={styles.title}>装修：</span>
                {renovation}
              </div>
              <div>
                <span className={styles.title}>楼层：</span>
                {floor}
              </div>
            </Flex.Item>
            <Flex.Item>
              <div>
                <span className={styles.title}>朝向：</span>
                {oriented.join(' ')}
              </div>
              <div>
                <span className={styles.title}>类型：</span>普通住宅
              </div>
            </Flex.Item>
          </Flex>
        </div>

        {/* 地图位置 */}
        <div className={styles.map}>
          <div className={styles.mapTitle}>
            小区：
            <span>{community}</span>
          </div>
          <div className={styles.mapContainer} id="map">
            地图
          </div>
        </div>

        {/* 房屋配套 */}
        <div className={styles.about}>
          <div className={styles.houseTitle}>房屋配套</div>
          {this.renderHousePackage(supporting)}
        </div>

        {/* 房屋概况 */}
        <div className={styles.set}>
          <div className={styles.houseTitle}>房源概况</div>
          <div>
            <div className={styles.contact}>
              <div className={styles.user}>
                <img src={BASE_URL + '/img/avatar.png'} alt="头像" />
                <div className={styles.useInfo}>
                  <div>王女士</div>
                  <div className={styles.userAuth}>
                    <i className="iconfont icon-auth" />
                    已认证房主
                  </div>
                </div>
              </div>
              <span className={styles.userMsg}>发消息</span>
            </div>

            <div className={styles.descText}>
              {/* {description || '暂无房屋描述'} */}
              1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。
              2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。
              3.人车分流，环境优美。
              4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。
            </div>
          </div>
        </div>

        {/* 推荐 */}
        <div className={styles.recommend}>
          <div className={styles.houseTitle}>猜你喜欢</div>
          <div className={styles.items}>
            {recommendHouses.map((item) => (
              <HouseItem {...item} key={item.id} />
            ))}
          </div>
        </div>

        {/* 底部收藏按钮 */}
        <Flex className={styles.fixedBottom}>
          <Flex.Item>
            <img
              src={
                BASE_URL + (isFavorites ? '/img/star.png' : '/img/unstar.png')
              }
              className={styles.favoriteImg}
              alt="收藏"
            />
            <span onClick={this.clcikFavorite} className={styles.favorite}>
              收藏
            </span>
          </Flex.Item>
          <Flex.Item>在线咨询</Flex.Item>
          <Flex.Item>
            <a href="tel:400-618-4000" className={styles.telephone}>
              电话预约
            </a>
          </Flex.Item>
        </Flex>
      </div>
    )
  }
}
